/**
 * eslint-disable react-native/no-inline-styles
 */
import React from 'react';
import {
    View,
    StyleSheet,
    Image,
    TouchableOpacity,
} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import CustomDropdown from './CustomDropdown';

const NavigationBar = ({ toggleMenu }: { toggleMenu: () => void }) => {
    return (
        <View style={styles.cardContainer}>
            {/* 左侧Logo */}
            <Image
                style={styles.img}
                source={require('../../assets/images/icon.png')}
            />
            {/* 右侧内容：语言选择 + 菜单按钮 */}
            <View style={styles.rightContainer}>
                <View style={styles.dropdownContainer}>
                    <CustomDropdown
                        options={['English', '简体中文']}
                        onSelect={(value: any) => console.log('选中:', value)}
                        defaultValue="语言"
                        HomeStyle={{
                            position: 'relative',
                            width: 90,
                        }}
                    />
                </View>

                {/* 菜单按钮 - 位于语言选择的右侧 */}
                <TouchableOpacity
                    onPress={toggleMenu}
                    style={styles.menuButton}
                >
                    <FontAwesome
                        name="bars"
                        size={20}
                        color="#333"
                    />
                </TouchableOpacity>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    cardContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between', // 左右内容分开
        height: 50,
        backgroundColor: '#fff',
        borderRadius: 8,
        shadowColor: '#000',
        shadowOpacity: 0.2,
        shadowRadius: 4,
        elevation: 4,
        paddingHorizontal: 16,
    },
    img: {
        width: 35,
        height: 35,
        borderRadius: 4,
        marginBottom: 10
    },
    rightContainer: {
        flexDirection: 'row', // 水平排列
        alignItems: 'center',
    },
    dropdownContainer: {
        marginRight: 10, // 与菜单按钮保持间距
        marginBottom: 10
    },
    menuButton: {
        padding: 10,
        backgroundColor: '#f0f0f0',
        borderRadius: 8,
        elevation: 2,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.2,
        shadowRadius: 2,
        marginBottom: 10
    },
});

export default NavigationBar;